import styled,{ThemeProvider} from "styled-components";
// Define our button
import React, { useCallback, useState } from "react";
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  /* Color the border and text with theme.main */
  color: ${(props) => props.theme.main};
  border: 2px solid ${(props) => props.theme.main};
`;

const ThemeCase = () => {
    const [theme] = useState({
        main: "mediumseagreen"
      });
  return (
    <>
    {/* 这里通过props穿了theme,那button组件里就会通过props取到这个theme */}
      <Button theme={{ main: "royalblue" }}>Ad hoc theme</Button>
      <ThemeProvider theme={theme}>
        <div>
            {/* 这里使用button组件没传theme，但是被ThemeProvider包着，就会取到ThemeProvider的theme */}
          <Button>Themed</Button>
          {/* 这里的Button被ThemeProvider包着，ThemeProvider提供了theme属性，Button标签也有theme属性 */}
          {/* 样式组件优先取到自己的theme属性值，然后才是ThemeProvider提供的theme值 */}
          <Button theme={{ main: "darkorange" }}>Overridden</Button>
        </div>
      </ThemeProvider>
    </>
  );
};
export default ThemeCase;
